import React, { useState } from 'react';
import { Row, Col, Image, Card, Divider, Result, message } from 'antd';
import axios, { CancelTokenSource } from 'axios';
import TopMenu from '../menu/top-menu';
import ReactDOM from 'react-dom';
import { throws } from 'assert';
import { Link } from 'react-router-dom';

// interface IProps{
//   bookId: number,
//   recommendBookList:List[];
// }

// recommend book type
interface List{
    author: string,
    bookId: number,
    categoryName: string,
    chapterStatus: string,
    coverImg: string,
    desc: string,
    title:string,
    word: string,
}
// book detail data
interface BookDetailData {
  author: string,
  bookId: number,
  categoryName: string,
  chapterNum: number,
  coverImg: string,
  desc: string,
  title: string,
  update: {
            chapterId: number,
            chapterName: string,
            chapterStatus: string,
            time: string
        },
 word: string
}

interface IProps{
  bookDetailData:BookDetailData,
  bookList:List[],
}

export default function BookDetail(props:IProps) {
    console.log("调用BookDetail组件！", props.bookList );
    console.log("调用BookDetail组件！", props.bookDetailData );
    return (
      <div>
          {/* 书籍详情 */}
          <Card title={props.bookDetailData.title} bordered={true} >
             <Row>
                <Col span={4}><Image alt={props.bookDetailData.title} height={150} width={100} src={"http://yuenov.com:15555" + props.bookDetailData.coverImg} /></Col>
                    <Col span={2}>作者：{props.bookDetailData.author}</Col>
                    <Col span={4}>简介：{props.bookDetailData.desc}</Col>
                    <Col span={2}>分类：{props.bookDetailData.categoryName}</Col>
                    <Col span={2}>章节数：{props.bookDetailData.chapterNum}</Col>
                    <Col span={2}>字数：{props.bookDetailData.word}</Col>
                </Row>
          </Card>
          {/* 书籍推荐 */}
          <Row>推荐同类书籍</Row>
          {
            props.bookList.map((item:List ,key:number) => {
              return (
              <><Divider orientation="left" />
                <Row>
                  <Col span={4}>
                  <Link to={{ pathname: '/book/'+item.bookId}}>
                    <Card title={item.title} bordered={true}>
                      <Row>
                        <Col span={4}><Image alt={item.title} height={150} width={100} src={"http://yuenov.com:15555" + item.coverImg} /></Col>
                        <Col span={2}>作者：{item.author}</Col>
                        {/* <Col span={4}>简介：{item.desc}</Col> */}
                      </Row>
                    </Card>
                  </Link>
                  </Col>
                </Row>
              </>);
            })
          }
      </div>
    )

}
